// 1. 定义路由表
import Home from "../views/Home.vue";
import Hello from "../views/Hello.vue";
import {createRouter, createWebHistory} from "vue-router";
import User from "../views/User.vue";
import UserProfie from "../views/UserProfie.vue";
import Hello2 from "../views/Hello2.vue";

// 定义路由表
const routes = [
    // 1. 普通路由
    { path: '/', component: Home },
    { path: '/hello', component: Hello },
    { path: '/hello2', component: Hello2 },
    // 导入组件时，使用箭头函数，这样可以实现懒加载，只有访问到这个路由时，才会加载组件

    // 2. 路径参数 /haha:id，id是路径参数，id的值可以是任意字符串
    {
        path: '/haha/:id/:name/:age',
        name: 'Haha',
        component: () => import('../views/Haha.vue') },

    // 3. 嵌套路由
    {
        path: '/user/:id',
        component: User,
        children: [
            // /user/007/profile，这里的profile前面不要加/，否则会变成/user/007//profile
            {
                path: 'profile',
                component: UserProfie,
                name: 'UserProfile001',
            },
            {
                path: 'posts',
                // name: 'UserPosts001',
                component: () => import('../views/UserPosts.vue'),
            }
        ]
    }
]

// 2. 创建路由器
const router = createRouter({
    history: createWebHistory(),
    routes: routes, // 指明路由表，即上面定义的routes，因为名称相同，这里一整行可以简写为 routes

})

// 全局导航守卫。
router.beforeEach((to, from) => {
    console.log('to', to);
    console.log('from', from);

    if (to.fullPath === '/hello') {
        // EG:在这可以判断用户是否登录，如果没有登录，跳转到登录页面

        console.log('hello页面，禁止访问');
        return "/"
    }
    // 1. 返回false，取消导航
    // 2. 返回true，继续导航
    // 3. 返回'路径' 字符串，会跳到指定的页面
    // return false
})

// router.beforeEach(async (to, from) => {
//     console.log('to', to);
//     console.log('from', from);
//
//     // 异步请求，获取用户信息, 上面参数前面加async，这里就可以使用await了
//     await fetch('/api/user')
//
//     if (to.fullPath === '/hello') {
//         // EG:在这可以判断用户是否登录，如果没有登录，跳转到登录页面
//
//         console.log('hello页面，禁止访问');
//         return "/"
//     }
//     // 1. 返回false，取消导航
//     // 2. 返回true，继续导航
//     // 3. 返回'路径' 字符串，会跳到指定的页面
//     // return false
// })

// 3. 导出路由器
export default router;

// vue实例使用路由器方法
/*
    4.1 在main.js中引入
    import router from './router'
    4.2 在vue实例中使用
    app.use(router)
 */
